<template>
	<view class="goods-detail">

		<!-- 轮播图 -->
		<view class="goods-detail__swiper">
			<!-- <swiper class="swiper" :circular="circular" :indicator-dots="indicatorDots" :autoplay="autoplay"
				:interval="interval" :duration="duration" :disable-touch="disableTouch" @change="swiperChange"
				:current="current">
				<swiper-item v-for="(item, index) in swiperList" :key="index">
					<image class="swiper-item" :src="item" mode="widthFix"></image>
				</swiper-item>
			</swiper>
			<view class="goods-detail__swiper__current">图片{{ current + 1 }}/{{swiperList.length}}</view> -->
			<u-swiper :list="swiperList" keyName="url" height="750rpx" :radius="0" circular :autoplay="false"
				@change="e => currentNum = e.current">
				<view slot="indicator" class="indicator-num">
					<text class="indicator-num__text">{{ currentNum + 1 }}/{{ swiperList.length }}</text>
				</view>
			</u-swiper>
		</view>

		<!-- 商品名称 -->
		<view class="goods-detail__box">
			<view class="pricebox">
				<view class="goods-detail__info__price"><span
						v-if="pageData.unitPrice !== 0">￥</span>{{ pageData.unitPrice !== 0 ? pageData.unitPrice.toFixed(2) : '******' }}
				</view>
				<!-- <view class="goods-list_price" v-if="pageData.vip">
					<view class="pricetitle">VIP</view>
					<view class="youhuiprice">￥<text>{{Number(pageData.vip).toFixed(2)}}</text></view>
				</view> -->
			</view>
			<view class="goods-detail__info__name">{{ pageData.name }}</view>
			<view class="goods-detail__info__short">{{ pageData.shortName }}</view>
			<view class="share-but">
				<button class="but-def" open-type="share">
					<image src="../../static/share.png" style="width: 46rpx;height: 46rpx;"></image>
					<view style="color: #999999;font-size: 25rpx;margin-top: 10rpx;">分享</view>
				</button>
			</view>
			<view v-if="pageData.unitPrice"
				style="display: flex;align-items: center;margin-top: 19rpx;justify-content: space-between;">
				<view class="add-bg">
					<view class="add-bg-item" style="width: 127rpx;">
						<view>毛重</view>
						<view style="color: #999999;margin-top: 8rpx;">约<text
								style="color: #000000;">{{pageData.weight}}</text>斤</view>
					</view>
					<view class="item-line"></view>
					<view class="add-bg-item" style="flex: 1;">
						<view>毛单价</view>
						<view style="color: #999999;margin-top: 8rpx;">约<text
								style="color: #000000;">{{(pageData.unitPrice/pageData.weight).toFixed(2)}}</text>元/斤
						</view>
					</view>
				</view>
				<view class="add-bg">
					<view class="add-bg-item" style="width: 127rpx;">
						<view>净重</view>
						<view style="color: #999999;margin-top: 8rpx;">约<text
								style="color: #000000;">{{pageData.weight - pageData.tare}}</text>斤</view>
					</view>
					<view class="item-line"></view>
					<view class="add-bg-item" style="flex: 1;">
						<view>净单价</view>
						<view style="color: #999999;margin-top: 8rpx;">约<text
								style="color: #000000;">{{(pageData.unitPrice/(pageData.weight - pageData.tare)).toFixed(2)}}</text>元/斤
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 保障 -->
		<view class="goods-detail__save">
			<view class="goods-detail__box__line">
				<view class="label">配送</view>
				<view v-if="pageData.batchNo==1" class="info border-bot">24点之前下单，次日9点之前送到</view>
				<view v-else class="info border-bot">24点之前下单，次日送达</view>
			</view>
			<view class="goods-detail__save__line">
				<view class="label"></view>
				<view class="info"></view>
			</view>
			<view class="goods-detail__box__line">
				<view class="label">保障</view>
				<view class="info">不支持7天无理由退货</view>
			</view>
		</view>
		<!-- 商品详情 -->
		<view class="goods-detail__particular" style="padding-bottom: 23rpx;">
			<view class="goods-detail__particular__title" style="padding: 20rpx 0;">商品详情</view>
			<view class="add-detail">
				<view style="display: flex;align-items: center;padding: 24rpx 0;border-bottom: 1rpx solid #F6F6F6;">
					<view style="display: flex;align-items: center;flex: 1;">
						<view style="color: #999999;width: 130rpx;">产地</view>
						<view v-if="pageData.placeOrigin" style="color: #333333;">{{pageData.placeOrigin}}</view>
						<view v-else style="color: #333333;">暂无</view>
					</view>
					<view style="display: flex;align-items: center;flex: 1;">
						<view style="color: #999999;width: 130rpx;">等级</view>
						<view v-if="pageData.grade" style="color: #333333;">{{pageData.grade}}</view>
						<view v-else style="color: #333333;">暂无</view>
					</view>
				</view>
				<view style="display: flex;align-items: center;padding: 24rpx 0;border-bottom: 1rpx solid #F6F6F6;">
					<view style="display: flex;align-items: center;flex: 1;">
						<view style="color: #999999;width: 130rpx;">不良率</view>
						<view v-if="pageData.rejectRatio" style="color: #333333;">{{pageData.rejectRatio}}</view>
						<view v-else style="color: #333333;">暂无</view>
					</view>
					<view style="display: flex;align-items: center;flex: 1;">
						<view style="color: #999999;width: 130rpx;">大小</view>
						<view v-if="pageData.size" style="color: #333333;">{{pageData.size}}</view>
						<view v-else style="color: #333333;">暂无</view>
					</view>
				</view>
				<view style="display: flex;align-items: center;padding: 24rpx 0;border-bottom: 1rpx solid #F6F6F6;">
					<view style="display: flex;align-items: center;flex: 1;">
						<view style="color: #999999;width: 130rpx;">商品描述</view>
						<view v-if="pageData.intro" style="color: #333333;">{{pageData.intro}}</view>
						<view v-else style="color: #333333;">暂无</view>
					</view>
				</view>
				<view style="display: flex;align-items: center;padding: 24rpx 0;">
					<view style="display: flex;align-items: center;flex: 1;">
						<view style="color: #999999;width: 130rpx;">售后须知</view>
						<view v-if="pageData.aftersale" style="color: #333333;">{{pageData.aftersale}}</view>
						<view v-else style="color: #333333;">暂无</view>
					</view>
				</view>


			</view>
		</view>



		<!-- 商品明细详情 -->
		<view class="goods-detail__particular">
			<view class="goods-detail__particular__title">商品信息</view>
			<view class="goods-detail__particular__html" v-html="detail"></view>
		</view>

		<!-- 底部固定按钮 -->
		<view class="goods-detail__bot">
			<view class="goods-detail__iconbox">
				<image class="goods-detail__iconbox__icon" mode="widthFix" :src="$imgUrl('/goodsdetail/icon-kf.png')">
				</image>
				<view>客服</view>
			</view>
			<view class="goods-detail__iconbox" @click="toShopCar">
				<image class="goods-detail__iconbox__icon" mode="widthFix" :src="$imgUrl('/goodsdetail/icon-car.png')">
				</image>
				<view>购物车</view>
				<view class="number">{{ shopCart.count > 99 ? '99+' : shopCart.count }}</view>
			</view>
			<view class="goods-detail__addcar" @click="addIntoCar">加入购物车</view>
		</view>

		<certificationPop v-if="showWindow" @closeWindow="closeWindow" />
	</view>
</template>

<script>
	import certificationPop from '@/components/certificationPop.vue'
	import {
		mapState,
		mapActions
	} from 'vuex'
	export default {
		components: {
			certificationPop
		},
		data() {
			return {
				pageData: {
					unitPrice: 0,
					name: '',
					shortName: ''
				},
				detail: '',
				indicatorDots: false, // 是否显示面板指示点
				autoplay: true, // 是否自动切换
				interval: 2000, // 自动切换时间间隔
				duration: 500, // 滑动动画时长
				circular: true, // 是否采用衔接滑动，即播放到末尾后重新回到开头
				disableTouch: true, // 是否禁止用户 touch 操作
				swiperList: [], // 轮播图图片
				current: 0, // 当前显示的图
				showWindow: false,
				currentNum: 0
			}
		},
		computed: {
			...mapState(['userInfo', 'shopCart', 'isLogin']),
		},
		onLoad(options) {
			this.getGoodsDetail(options.id)
		},
		onShareAppMessage() {
			let title;
			let img = '';
			// if (this.pageData.vip > 0) {
			// 	title = `${this.pageData.name}低至${this.pageData.vip}元`
			// } else {
			// 	title = `${this.pageData.name}`
			// }
			title = `${this.pageData.name}低至${this.pageData.unitPrice}元`
			let imgList = this.pageData.pic.split(',')
			if (imgList.length > 0) {
				img = imgList[0]
			}
			return {
				title: title,
				path: '',
				imageUrl: img
			}
		},
		methods: {
			...mapActions(['getShopCart', 'login']),
			// 获取商品详情
			async getGoodsDetail(id) {
				const data = await this.$apis.goods.goodsDetail({
					id
				})
				this.swiperList = data.data.pic.split(',')
				if (data.data.mp4) {
					this.swiperList.unshift(data.data.mp4)
				}
				this.pageData = data.data
				this.detail = this.pageData.detail.replace(/\<img/gi, '<img style="width: 100%"')
			},
			// swiper切换
			swiperChange(e) {
				this.current = e.current
			},
			// 路由到购物车页面
			toShopCar() {
				uni.switchTab({
					url: '/pages/shopcar/index'
				})
			},
			// 加入到购物车
			addIntoCar() {
				if (this.pageData.unitPrice !== 0) {
					// add
					this.addGoods()
				} else {
					if (this.isLogin === 1) {
						if (this.userInfo.authStatus == null || this.userInfo.authStatus == 2) {
							this.showWindow = true
						}
						if (this.userInfo.authStatus == 0) {
							uni.showToast({
								title: '后台正在审核中',
								icon: 'none',
								duration: 2000,
								mask: true
							});
						}
					} else {
						this.login()
					}
				}
			},
			// 加入购物车
			addGoods() {
				uni.showLoading({
					mask: true
				})
				let that = this
				this.$apis.order.addCart({
						count: 1,
						goodsId: this.pageData.id
					})
					.then(res => {
						uni.hideLoading()
						that.getShopCart()
					})
			},
			// 关闭弹窗
			closeWindow() {
				this.showWindow = false
			}
		}
	}
</script>

<style scoped lang="scss">
	.add-bg {
		width: 337rpx;
		height: 104rpx;
		background: #FBFBFB;
		border-radius: 10rpx;
		display: flex;
		align-items: center;
	}

	.add-detail {
		width: 100%;
		padding: 0 15px;
		font-size: 27rpx;
	}

	.add-bg-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		font-size: 23rpx;
		color: #000000;
	}

	.item-line {
		width: 2px;
		height: 46rpx;
		background: #F0F0F0;
	}

	.goods-detail {
		min-height: 100vh;
		background: #F6F6F6;
		padding-bottom: 98rpx;

		// 轮播图样式
		.goods-detail__swiper {
			width: 750rpx;
			height: 750rpx;
			background: #EEEEEE;
			position: relative;

			.swiper {
				width: 100%;
				height: 100%;
			}

			.swiper-item {
				width: 750rpx;
				height: 750rpx;
				display: block;
			}

			.goods-detail__swiper__current {
				padding: 6rpx 16rpx;
				background: rgba(0, 0, 0, 0.3);
				border-radius: 22rpx;
				font-size: 24rpx;
				color: #FFFFFF;
				position: absolute;
				right: 20rpx;
				bottom: 24rpx;
			}
		}

		// 商品信息
		.goods-detail__box {
			margin: 0 auto;
			margin-top: 20rpx;
			width: 719rpx;
			box-sizing: border-box;
			padding: 24rpx 15rpx;
			background: #FFFFFF;
			border-radius: 16rpx;
			position: relative;
		}

		.share-but {
			position: absolute;
			right: 44rpx;
			top: 44rpx;

		}

		.but-def {
			border: none;
			margin: 0;
			padding: 0;
			line-height: 1;
			background-color: #FFFFFF;
			display: flex;
			flex-direction: column;
			align-items: center;
		}

		.but-def::after {
			border: none;
		}

		.pricebox {
			display: flex;
			justify-content: flex-start;
			align-items: center;

			.goods-detail__info__price {
				font-size: 46rpx;
				font-weight: bold;
				color: #FB4041;
				margin-bottom: 12rpx;

				span {
					font-size: 30rpx;
				}
			}

			.goods-list_price {
				display: flex;
				justify-content: flex-start;
				align-items: center;
				margin-top: 6rpx;
				margin-left: 20rpx;

				.pricetitle {
					width: 60rpx;
					height: 32rpx;
					color: #FBE6C7;
					font-size: 24rpx;
					background-color: #3F3F47;
					border-radius: 6rpx 0 0 6rpx;
					display: flex;
					justify-content: center;
					align-items: center;
				}

				.youhuiprice {
					background-color: #FBE6C7;
					font-size: 20rpx;
					padding: 0 8rpx;
					height: 32rpx;
					color: #3F3F47;
					box-sizing: border-box;
					font-weight: 600;
					border-radius: 0 6rpx 6rpx 0;

					text {
						font-size: 26rpx;
					}
				}
			}
		}

		.goods-detail__info__name {
			font-size: 32rpx;
			font-weight: bold;
			color: #333333;
			line-height: 45rpx;
		}

		.goods-detail__info__short {
			font-size: 28rpx;
			color: #999999;
			line-height: 40rpx;
			margin-top: 8rpx;
		}

		.goods-detail__save {
			margin: 0 auto;
			margin-top: 20rpx;
			width: 719rpx;
			box-sizing: border-box;
			padding: 0 15rpx;
			background: #FFFFFF;
			border-radius: 16rpx;
		}

		.goods-detail__box__line {
			display: flex;
			align-items: center;

			.label {
				font-size: 28rpx;
				color: #999999;
				margin-right: 36rpx;
				padding: 24rpx 0;
			}

			.info {
				width: 570rpx;
				font-size: 28rpx;
				color: #333333;
				padding: 24rpx 0;
			}
		}

		.goods-detail__save__line {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.info {
				width: 570rpx;
				border-bottom: 1rpx solid #F6F6F6;
			}
		}

		.goods-detail__particular {
			width: 719rpx;
			background: #FFFFFF;
			border-radius: 16rpx;
			margin: 0 auto;
			margin-top: 20rpx;

			.goods-detail__particular__title {
				font-size: 30rpx;
				font-weight: bold;
				color: #333333;
				padding: 32rpx 0;
				text-align: center;
			}


		}

		.goods-detail__bot {
			width: 750rpx;
			height: 98rpx;
			background: #FFFFFF;
			position: fixed;
			left: 0;
			bottom: 0;
			z-index: 2;
			display: flex;
			align-items: center;

			.goods-detail__addcar {
				width: 476rpx;
				height: 72rpx;
				background: #FB4041;
				border-radius: 36rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 28rpx;
				color: #FFFFFF;
				margin-left: 48rpx;
			}

			.goods-detail__iconbox {
				display: flex;
				flex-direction: column;
				align-items: center;
				margin-left: 48rpx;
				font-size: 22rpx;
				color: #666666;
				position: relative;

				.number {
					height: 30rpx;
					padding: 0 9rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					background: #FB4041;
					border-radius: 15rpx;
					font-size: 22rpx;
					color: #FFFFFF;
					position: absolute;
					right: -15rpx;
					top: 0rpx;
				}
			}

			.goods-detail__iconbox__icon {
				width: 44rpx;
				height: 44rpx;
				margin-bottom: 4rpx;
			}
		}

	}

	.indicator-num {
		padding: 4px 0;
		background-color: rgba(0, 0, 0, 0.35);
		border-radius: 100px;
		width: 60px;
		display: flex;
		justify-content: center;

		&__text {
			color: #FFFFFF;
			font-size: 14px;
		}
	}
</style>